<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>帮助编辑/添加</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-box mt">
            <el-form ref="form" label-position="left" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="学校名称" prop="school_name">
                    <el-input v-model="form.school_name"></el-input>
                </el-form-item>

                <el-form-item label="省" prop="school_name">
                  <el-input v-model="form.province"></el-input>
                </el-form-item>

                <el-form-item label="市" prop="school_name">
                  <el-input v-model="form.city"></el-input>
                </el-form-item>

                <el-form-item label="县/镇" prop="school_name">
                  <el-input v-model="form.area"></el-input>
                </el-form-item>

                <el-form-item label="学校地址" prop="school_name">
                  <el-input v-model="form.school_address"></el-input>
                </el-form-item>

                <el-form-item label="洗衣机数量" prop="num">
                  <el-input v-model.number="form.num"></el-input>
                </el-form-item>

                <el-form-item label="最大号码牌" prop="num">
                  <el-input v-model.number="form.max_num"></el-input>
                </el-form-item>

                <el-form-item label="最小号码牌" prop="num">
                  <el-input v-model.number="form.min_num"></el-input>
                </el-form-item>

                <el-form-item label="服务时间" required>
                  <el-col :span="11">
                    <el-form-item prop="school_name">
                      <el-date-picker type="date" placeholder="开始日期" v-model="form.contract_start_time" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                    <el-form-item prop="school_name">
                      <el-date-picker type="date" placeholder="结束日期" v-model="form.contract_end_time" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>

                <el-form-item label="简介" prop="school_name">
                  <el-input v-model="form.introduce"></el-input>
                </el-form-item>

                <el-form-item label="概况" prop="school_name">
                    <el-input autosize type="textarea" v-model="form.survey"></el-input>
                </el-form-item>

                <el-form-item label="排序" prop="num">
                    <el-input v-model.number="form.sort"></el-input>
                </el-form-item>
                <!-- 负责人 -->
                <el-form-item label="负责人" prop="school_name">
                  <el-input v-model="fans_name" placeholder="负责人搜索" style="width: 200px;"></el-input>
                  <el-button type="primary" icon="el-icon-search" @click="searchFans">搜索</el-button>
                  <div></div>
                  <el-tag
                    style="margin-right: 10px;margin-top: 10px;"
                    :key="tag.name"
                    v-for="(tag, index) in form.contact_wechat"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index)">
                    {{tag.name}}
                  </el-tag>
                </el-form-item>
                
                <el-form-item label="朋友圈">
                  <el-switch
                    v-model="form.moment"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="开"
                    inactive-text="关">
                  </el-switch>
                </el-form-item>
                <v-img imgType="schoolcontract" :img="form.contract_path" imgTips="合同图片"></v-img>
                <v-img imgType="schoolcover" :img="form.cover_path" imgTips="封面图片"></v-img>
                <v-img-upload :imageList="school_pic"></v-img-upload>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')">提交</el-button>
                    <el-button @click="navTop" v-if="!Edit">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="overlay" @click="closeFansList"></div>
        <div class="fans-add">
          <el-checkbox-group v-model="check_list">
            <el-checkbox :label="item" :key="item.id" v-for="item in fans_list">{{item.name}}</el-checkbox>
          </el-checkbox-group>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :page-size="15"
            style="margin-top: 15px;">
          </el-pagination>
          <el-button type="primary" size="mini" plain @click="contactWechatAdd">确定</el-button>
          <el-button plain size="mini" @click="closeFansList">取消</el-button>
        </div>
    </div>
</template>

<script>
import bus from '../../../bus.js';
import vImg from '../../common/OneImgUpload';
import vImgUpload from '../../common/UploadPictures';
export default {
  name: 'v-form',
  components: {
    vImg, vImgUpload
  },
  data: function() {
    return {
      Edit: false,
      form: {
        contact_wechat: [],
        sort: 0
      },
      fans_name: undefined,
      fans_list: [],
      check_list: [],
      school_pic: [],
      total: undefined,
      rules: {
          school_name: [
              { required: true, message: '此项为必填' }
          ],
          num: [
              { required: true, message: '此项为必填' },
              { type: 'number', message: '排序必须是数字' }
          ]
      }
    }
  },
  methods: {
    onSubmit(formName) {
      //  进行规则验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 没有添加省市就要加上
          if (this.form.province.indexOf('省') < -1 && (this.form.province.indexOf('上海') || this.form.province.indexOf('北京'))) {
            this.form.province += '省'
          }
          if (this.form.city.indexOf('市') == -1) {
            this.form.city += '市'
          }
          for (let k in this.form) {
            if (this.form[k] === null) {
              this.form[k] = [];
            }
          }
          // 验证通过，进行编辑/添加判断
          if (!this.Edit) {
              // 不是编辑，去除id
              delete this.form.id
              APP.ajax('post@school/add', this.form, res => {
                  if (res.data.status === 200) {
                      this.$message.success('添加成功！');
                  }
              })
          } else {
              APP.ajax('post@school/update', this.form, res => {
                  if (res.data.status === 200) {
                      this.$message.success('编辑成功！')
                  }
              })
          }
        } else {
          return false;
        }
      });
    },
    navTop() {
      bus.$emit('ViewShow', '取消');
    },
    searchFans() {
      APP.ajax('fans/list', { name: this.fans_name }, res => {
        this.fans_list = res.data.data.data;
        this.total = res.data.data.total;
        this.openFansList();
      });
    },
    openFansList() {
      document.getElementsByClassName('overlay')[0].style.display = 'block';
      document.getElementsByClassName('fans-add')[0].style.display = 'block';
    },
    closeFansList() {
      document.getElementsByClassName('overlay')[0].style.display = 'none';
      document.getElementsByClassName('fans-add')[0].style.display = 'none';
    },
    handleCurrentChange() {
      APP.ajax('fans/list?page=' + val, { name: this.fans_name }, res => {
        this.fans_list = res.data.data.data;
      });
    },
    handleClose(index) {
      this.form.contact_wechat.splice(index, 1);
      this.check_list.splice(index, 1);
    },
    contactWechatAdd() {
      // 点击添加，往负责人里面添加。如果负责人为空，则为空，否则为本身。
      this.form.contact_wechat = [] || this.form.contact_wechat;
      this.check_list.forEach(element => {
        this.form.contact_wechat.push({ openid: element.openid, name: element.name });
      });
      this.closeFansList();
    },
    changeSchoolPic(e) {
      this.form.school_pic = [];
      e.forEach((element, index) => {
        if (!element.id) {
          this.form.school_pic.push('ozgbpfht7.bkt.clouddn.com/' + element.response.key );
        }
      });
    }
  },
  mounted () {
    // 判断是否有id传值，没有则不是编辑页面，而是添加页面
    if (this.$route.params.id) {
        this.Edit = true;
        APP.ajax('post@school/detail', { id: this.$route.params.id }, res => {
            this.form = res.data.data[0];
            this.school_pic = this.form.school_pic;
            this.form.school_pic = [];
        })
    };
    bus.$on('changeSchoolContract', e => {
      this.form.contract_path = e;
    });
    bus.$on('changeSchoolCover', e => {
      this.form.cover_path = e;
    });
    bus.$on('schoolPics', e => {
      this.form.school_pic_del = e;
    });
    bus.$on('schoolPicUpload', e => {
      this.school_pic = e;
      this.changeSchoolPic(e);
    });
  }
}
</script>
<style scoped>
.avatar{
    float: left;
    width: 100%;
    height: 100%;
}
.overlay{
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9;
}
.fans-add{
  display: none;
  width: 500px;
  height: 500px;
  border: 1px solid #aaa;
  z-index: 10;
  position: fixed;
  left: calc(50% - 250px);
  top: calc(50% - 250px);
  background-color: #fff;
  padding: 15px 20px 20px 15px;
}
.fans-add button{
  margin: 20px auto 0;
}
</style>

